<template>
    <div class="login-bg">
        <div class="login-panel">
            <div class="login-header">
                <h1 class="login-title">后台登录</h1>
            </div>

            <k-form ref="form"
                    :model="form"
                    :rules="rules"
                    @submit="onSubmit">
                <k-form-item prop="username">
                    <el-input v-model="form.username"
                              placeholder="用户名"
                              prefix-icon="el-icon-user"
                    />
                </k-form-item>

                <k-form-item prop="password">
                    <el-input v-model="form.password"
                              type="password"
                              placeholder="密钥"
                              prefix-icon="el-icon-key"
                    />
                </k-form-item>

                <k-form-item>
                    <el-button type="primary"
                               native-type="submit"
                               size="medium"
                               ref="btn"
                               :loading="subing"
                               block>登录</el-button>
                </k-form-item>
            </k-form>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { SystemConfigModel, SystemModule } from '@/store/system';
import { AuthModule } from '@/store/auth';
import { InitModule } from '@/store/initState';
import KForm from '@/components/form/KForm.vue';
import KFormItem from '@/components/form/KFormItem.vue';
@Component({
    components: { KFormItem, KForm }
})
export default class Login extends Vue {
    form: any = {};
    subing: boolean = false;
    rules: any = {
        username: [
            { required: true, message: '清输入用户名' }
        ],
        password: [
            { required: true, message: '清输入密钥' }
        ]
    };

    mounted() {
    }

    get systemConfig(): SystemConfigModel {
        return SystemModule.config;
    }

    // 提交登陆
    async onSubmit() {
        this.subing = true;
        AuthModule.login(this.form)
            .finally(() => {
                this.subing = false;
            })
            .then((result) => {
                if (result) {
                    (this.$refs['btn'] as any).$el.focus();
                    (this.$refs['form'] as any).resetFields();
                    this.form = {};
                    InitModule.init();
                    if (this.$route.query.redirect) {
                        this.$router.push(this.$route.query.redirect as string);
                    } else {
                        this.$router.replace('/');
                    }
                }
            })
    }
}
</script>

<style scoped lang="scss">
.login-bg {
    height: 100vh;
    background-image: url('../../assets/images/login-body.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #e8eaf2;
    position: relative;
}
.login-header {
    margin-bottom: 40px;
}
.login-title {
    padding: 12px 0;
    font-size: 24px;
    text-align: center;
    box-sizing: border-box;
}
.login-panel {
    max-width: 450px;
    top: calc(50% - 182.5px);
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    background: rgba(255,255,255,0.5);
    padding: 40px 20px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0 0.5rem 2rem;
}
</style>
